<template>
  <div class="login">
    <Header :fixed="true">
      <div slot="title">登录</div>
    </Header>
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div class="login-box">
      <div class="text-links cf">
        <router-link to="/register" class="fr line">新用户注册</router-link>
      </div>
      <van-field v-model="form.mobilePhone" placeholder="用户名" class="mtop" :error-message="phoneErrData" />
      <van-field v-model="form.passWord" type="password" placeholder="密码" class="mtop" />
      <div class="text-links-c">
        <span @click="repass" class="d-size">忘记密码</span>
      </div>
      <van-button class="login-btn" round color="linear-gradient(to right, #5694cf, #53a9e0)" size="large" @click="doLogin">登 录</van-button>
    </div>
    <div class="login-f-bg" :style="{backgroundImage: `url(${Bg2})`, display: timer ? 'none' : 'block'}"></div>
    <!-- 忘记密码 -->
    <van-dialog
      v-model="show"
      show-cancel-button
      @confirm="onSublime">
      <van-field class="seeting-ptop" v-model="mobilePhone" placeholder="填写手机号码" />
    </van-dialog>
  </div>
</template>

<script>
import Bg2 from '@/assets/fobg.png'
import Header from '@/components/Header'
import { checkPhone } from '@/libs/verify'
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      form: {
        mobilePhone: '',
        passWord: ''
      },
      Bg2,
      fullHeight: document.documentElement.clientHeight,
      height: '',
      timer: false,
      show: false,
      mobilePhone: ''
    }
  },
  components: {
    Header
  },
  computed: {
    phoneErrData () {
      if (this.form.mobilePhone && !(checkPhone(this.form.mobilePhone))) {
        return '手机号码不合法'
      } else {
        return ''
      }
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        that.height = document.documentElement.clientHeight
      })()
    }
  },
  watch: {
    height (val) {
      if(this.fullHeight > val) {
        this.timer = true
      } else {
        this.timer = false
      }
    }
  },
  methods: {
    ...mapActions(['handleLogin']),
    doLogin () {
      if (!this.form.mobilePhone) {
        this.$toast('手机号不能为空！');
        return false
      }
      if (!(checkPhone(this.form.mobilePhone))) {
        this.$toast('手机号不合法！');
        return false
      }
      if (!this.form.passWord) {
        this.$toast('密码不能为空！');
        return false
      }
      
      this.handleLogin(this.form).then(res => {
        const data = res.data
        if (data.result === 'suc') {
          this.$toast.success('登录成功')
          setTimeout(() => {
            this.$router.push({name: 'home'})
          }, 1500)
        } else {
          this.$toast.fail(data.msg)
        }
      }) 
    },
    repass () {
      this.mobilePhone = ''
      this.show = true
    },
    onSublime () {
    if (this.mobilePhone == '') {
      this.$toast('手机号不能为空！');
      return
    }
    if (!(/^1[3456789]\d{9}$/.test(this.mobilePhone))) {
      this.$toast('手机号不合法！');
    } else {
      let obj = {
        mobilePhone: this.mobilePhone,
        sendType: 'reset'
      }
      sessionStorage.setItem('reset', JSON.stringify(obj))
      this.$router.push('/repass')
    }
  },
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.logo {
  text-align: center;
  padding: 32px 0 32px 0;
  margin-top: 58px;
  img {
    width: 213px;
    height: 63px;
  }
}
.login-box {
  padding: 0 10% 0 10%;
  .fr {
    display: block;
    float: right;
    font-size: @normal-size;
    line-height: 24px;
    color: #292929;
    padding: 0 6px;
  }
  .text-links-c {
    text-align: left;
    padding-left: 20px;
    margin-top: 64px;
    .d-size {
      font-size: @small-size;
      line-height: 18px;
      color: #fda233;
    }
  }
  .mtop {
    margin-top: 20px;
  }
  .login-btn {
    margin-top: 10px;
  }
}
.login-f-bg {
  width: 100%;
  height: 91px;
  background: center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>